<template>
    <div class="user-info-container">
        <h2>个人信息</h2>
        <el-form :model="userForm" label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="userForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="userForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateInfo">保存修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'UserProfileInfo',
    data() {
        return {
            userForm: {
                username: '',
                nickname: '',
                email: ''
            }
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            const userInfo = this.$store.state.user.userInfo
            this.userForm = { ...userInfo }
        },
        async updateInfo() {
            try {
                await this.$store.dispatch('user/updateUserInfo', this.userForm)
                this.$message.success('更新成功')
            } catch (error) {
                this.$message.error('更新失败')
            }
        }
    }
}
</script> 